<template>
    <div class="scroll-bar">
        <div class="scroll-head">
            <h2 class="scroll-head-title">{{title}}</h2>
            <el-button class="scroll-head-btn" @click="changeDiologVisb">
                添加新笔记
            </el-button>
        </div>
        <div class="scroll-bar">

            <el-scrollbar height="80vh">
                <el-card v-for="item,index in noteData" v-if="item !== null" :key="index" class="scroll-item"
                    @click="handleClick(index)">
                    <div>
                        {{ item.noteTitle }}

                    </div>
                    <span class="scroll-ctime" v-if="item.modifiTime==null">创建时间:{{ item.craeteTime }}</span>
                    <span class="scroll-ctime" v-else="item.modifiTime!=null">修改时间:{{ item.modifiTime }}</span>
                    <!--側栏删除键-->
                    <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled"
                        icon-color="#626AEF" title="确定要删除吗?" @confirm="deleteNote(item.noteId)" @cancel="">
                        <template #reference>
                            <el-button style="position: absolute; right: 0; top: 0; z-index: 100">
                                删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </el-card>
            </el-scrollbar>
            <div v-if="noteData === undefined" class="scroll-empty">
                还没有笔记哦
                _(:зゝ∠)_
            </div>
        </div>
        <div>
            <el-dialog v-model="dialogFormVisible" title="添加新笔记" width="30%">
                <el-form-item>
                    <el-input v-model="formname" placeholder="请输入新笔记名" style="height: 50px;" />
                </el-form-item>

                <el-form-item id="dialog-from">
                    <el-button @click="changeDiologVisb">
                        取消
                    </el-button>
                    <el-button type="primary" @click="handleBtnClick">
                        确定
                    </el-button>
                </el-form-item>

            </el-dialog>
        </div>

    </div>
</template>

<script>
export default {
    props: ['noteData', 'currentIndex', 'title'],
    mounted: function () {
        this.$nextTick(function () {
            // if (this.noteData === undefined) {
            //     this.isEmpty = true;
            // } else {
            //     this.isEmpty = false;
            // }
        })
    },
    updated() {
        // console.log(this.noteData );
        // if (this.noteData === undefined ) {
        //     this.isEmpty = true;
        // } else {
        //     this.isEmpty = false;
        // }
    },
    data() {
        return {
            dialogFormVisible: false,
            isEmpty: false,
            formname: '',
        }
    }, methods: {
        changeDiologVisb: function () {
            this.dialogFormVisible = !this.dialogFormVisible;
        }, handleClick(index) {
            this.$emit('handle-click', index)
        }, handleBtnClick() {
            this.changeDiologVisb();
            this.$emit('handle-btn-click', this.formname)
        }, deleteNote(id) {
            this.$emit('delete-note', id);
        },
    }
}
</script>

<style scoped>
.scroll-bar {
    /*border: 1px solid rgb(198, 196, 192);
        border-radius: 4px;*/
    position: relative;
}

.scroll-head-title {

    text-align: center;
}

.scroll-head {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: calc(100%-3px);
    height: 30%;
    padding: 3px;
    /*border: 1px solid rgb(198, 196, 192);*/

}

.scroll-item :hover {
    background-color: antiquewhite;
}

.scroll-item {
    position: relative;
    height: 60px;
    margin: 15px 10px;
    padding: 0;
}

.scroll-ctime {
    position: relative;
    float: right;
    font-size: 8px;
    color: rgb(105, 105, 105);
}

.scroll-empty {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: larger;
    text-align: center;
    margin-top: 10%;
}

#dialog-from {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;


}

:deep() .el-dialog__body {
    margin: 0;
    padding: 0;
}
</style>

